import React, {PureComponent} from 'react';
import {Navigate} from "react-router-dom";

class Index extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            list: ['', 'Apple', 'Banana'],
            index: null
        }
    }


    render() {
        const {index, list} = this.state;
        return (
            <div className='fruits'>
                <h1>Fruits</h1>
                <ul>
                    {list.map((item, i) => (
                        item && <li key={i} onClick={e => this.setState({index: i})}>{item}</li>
                    ))}
                    {
                        index && <Navigate to={`/fruit/detail/${index}?name=${list[index]}`}/>
                    }
                </ul>
            </div>
        );
    }
}

export default Index;